<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Spring Admin</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

    <link rel="icon" href="${ctx}/static/images/favicon.png">
    <link rel="shortcut icon" href="${ctx}/static/images/favicon.png">

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="${ctx}/static/assets/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${ctx}/static/assets/font-awesome/4.5.0/css/font-awesome.min.css"/>

    <!-- text fonts -->
    <link rel="stylesheet" href="${ctx}/static/assets/fonts.googleapis.com.css"/>

    <link href="${ctx}/static/assets/layer/theme/default/layer.css" rel="stylesheet">

    <!-- ace styles -->
    <link rel="stylesheet" href="${ctx}/static/assets/ace/ace.min.css"/>

    <link rel="stylesheet" href="${ctx}/static/assets/ace/ace-skins.min.css"/>
    <link rel="stylesheet" href="${ctx}/static/assets/ace/ace-rtl.min.css"/>

    <!-- 覆盖默认样式 -->
    <link rel="stylesheet" href="${ctx}/static/css/main.css">
    <style>
        iframe {display: none;}
        iframe.active {display: block}
    </style>

    <!-- ace settings handler -->
    <script src="${ctx}/static/assets/ace/ace-extra.min.js"></script>
    <script>var ctx = '${ctx}'</script>
</head>

<body class="no-skin page_index">

<%-- 系统设置 --%>
<div class="ace-settings-container" id="ace-settings-container">
    <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
        <i class="ace-icon fa fa-cog bigger-130"></i>
    </div>

    <div class="ace-settings-box clearfix" id="ace-settings-box">
        <div class="pull-left width-50">
            <div class="ace-settings-item">
                <div class="pull-left">
                    <select id="skin-colorpicker" class="hide">
                        <option data-skin="no-skin" value="#438EB9">#438EB9</option>
                        <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                        <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                        <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                    </select>
                </div>
                <span>&nbsp; Choose Skin</span>
            </div>

            <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar" autocomplete="off" />
                <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
            </div>

            <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar" autocomplete="off" />
                <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
            </div>

            <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-breadcrumbs" autocomplete="off" />
                <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
            </div>

            <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off" />
                <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
            </div>

            <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container" autocomplete="off" />
                <label class="lbl" for="ace-settings-add-container">
                    Inside
                    <b>.container</b>
                </label>
            </div>
        </div><!-- /.pull-left -->

        <div class="pull-left width-50">
            <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off" />
                <label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
            </div>

            <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off" />
                <label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
            </div>

            <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off" />
                <label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
            </div>
        </div><!-- /.pull-left -->
    </div>
</div>

<%-- 顶部导航 --%>
<div id="navbar" class="navbar navbar-default ace-save-state">
    <div class="navbar-container ace-save-state" id="navbar-container">

        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
            <span class="sr-only">Toggle sidebar</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <div class="navbar-header pull-left">
            <a href="${ctx}/main" class="navbar-brand">
                <small>
                    <i class="fa fa-leaf"></i> Spring Admin
                </small>
            </a>
        </div>

        <div class="navbar-buttons navbar-header pull-right" role="navigation">
            <%@include file="navbar.jsp"%>
        </div>
    </div>
</div>

<div class="main-container ace-save-state" id="main-container">
    <script>try {ace.settings.loadState('main-container')} catch (e) {}</script>

    <%-- 左侧菜单 --%>
    <div id="sidebar" class="sidebar responsive ace-save-state">
        <%@include file="sidebar.jsp"%>
    </div>

    <%-- 页面主体 --%>
    <div class="main-content">
        <div class="main-content-inner">
            <ul id="tabList" class="nav nav-tabs ace-save-state">
                <li class="active" data-tab="home" role="presentation">
                    <a href="#home" role="tab" data-toggle="tab">首页</a>
                </li>
            </ul>

            <div id="tabPanel" class="page-content no-padding">
                <iframe id="home" data-tab="home" class="active pos-rel" src="${ctx}/admin/welcome" frameborder="0"></iframe>
            </div>
        </div>
    </div>

    <%-- 页面底部 --%>
    <div class="footer">
        <div class="footer-inner">
            <div class="footer-content">
                <span class="bigger-120">
                    <span class="green bolder">Spring</span> Admin &copy; 2018
                </span>
            </div>
        </div>
    </div>
</div>

<script src="${ctx}/static/assets/jquery/jquery-2.1.4.js"></script>
<script src="${ctx}/static/assets/bootstrap/js/bootstrap.js"></script>
<script src="${ctx}/static/assets/layer/layer.js"></script>
<script src="${ctx}/static/assets/jquery.nicescroll/jquery.nicescroll.min.js?1"></script>
<script src="${ctx}/static/assets/jquery.nicescroll/jquery.nicescroll.plus.js?1"></script>
<script src="${ctx}/static/assets/ace/ace-elements.js"></script>
<script src="${ctx}/static/assets/ace/ace.js"></script>
<script src="${ctx}/static/js/common.js"></script>
<script src="${ctx}/static/js/main.js"></script>
<script src="${ctx}/static/js/admin/index/index.js"></script>
<script>
    $(function () {
        $.app.index.init();
    })
</script>
</body>

</html>
